<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>getElementsByTagName获取checkbox进行全选</title>
		<style type="text/css">
			#myTable{ width: 900px; margin: 0px auto; background-color: #008000;}
			#myTable td,#myTable th{ background-color: white;}
			#myDiv{width: 900px; margin: 0px auto; height: 30px; line-height: 30px; 
			text-align: center;}
		</style>
		<!-- <script>======代码======</script> -->
	</head>
	<body>
		<table cellspacing="1" id="myTable">
			<tr>
				<th width="200">
                  <input type="checkbox" id="selAll" onchange="selAll()" />全选
				<input type="checkbox" id="All" onchange="All()" />反选
                        </th>
				<th width="200">姓名</th>
				<th width="200">性别</th>
				<th width="200">专业</th>
				<th width="200">爱好</th>
			</tr>
			<tr>
				<td><input type="checkbox"/></td>
				<td>刘备</td>
				<td>男</td>
				<td>软件开发</td>
				<td>抽烟</td>
			</tr>
			<tr>
				<td><input type="checkbox"/></td>
				<td>关羽</td>
				<td>男</td>
				<td>国际贸易</td>
				<td>喝酒</td>
			</tr>
			<tr>
				<td><input type="checkbox"/></td>
				<td>张飞</td>
				<td>男</td>
				<td>园林设计</td>
				<td>烫头发</td>
			</tr>
			<tr>
				<td><input type="checkbox"/></td>
				<td>赵云</td>
				<td>男</td>
				<td>平面设计</td>
				<td>抽烟</td>
			</tr>
			<tr>
				<td><input type="checkbox"/></td>
				<td>黄忠</td>
				<td>男</td>
				<td>影视制作</td>
				<td>玩游戏</td>
			</tr>
			<tr>
				<td><input type="checkbox"/></td>
				<td>小乔</td>
				<td>女</td>
				<td>高级护理</td>
				<td>唱歌</td>
			</tr>
		</table>
        <script>
		const arr = document.querySelectorAll("tr td input");
            function selAll() {
				var d = document.querySelector("#selAll").checked ;
				
                console.log(d);
				if(d==false){
					for (let i = 0; i <arr.length; i++) {
				 	arr[i].checked = false;
				}
				}
				else{
					for (let i = 0; i <arr.length; i++) {
				 	arr[i].checked = true;
				}
				}}

			function All() {
				// var c = document.querySelector("#All").checked ;
				// if (c==true) {
				// 	for (let i = 0; i < arr.length; i++) {
				// 		if (arr[i].checked==true) {
				// 		arr[i].checked = false;
				// 	}else{
				// 		arr[i].checked = true;
				// 	}
					
				// 	}
				// }else{
				// 	for (let i = 0; i < arr.length; i++) {
				// 		if (arr[i].checked==false) {
				// 		arr[i].checked = true;
				// 	}else{
				// 		arr[i].checked = false;
				// 	}
					
				// 	}
				// }

				var a = document.querySelector("#All").checked;
				for(let i = 0 ; i < arr.length;i++){
					
						if(arr[i].checked == true){
							arr[i].checked = false;
						}else{
							arr[i].checked = true;
						}
					
					
				}
			}
				
				
				
            
        </script>
	</body>
</html>